import Vue from "vue";

import App from "./App.vue";

import VueRouter from "vue-router";
// VueRouter.install(Vue)
Vue.use(VueRouter);

import UsersA from "./components/UsersA.vue";
import UsersB from "./components/UsersB.vue";
import UsersC from "./components/UsersC.vue";

/*
{ 
  '/users/a': 'UsersA',
  '/users/b': 'UsersB',
  '/a/b/c/d': 'UsersB',
  '/users/c': 'UsersC',
}
*/
const router = new VueRouter({
  routes: [
    {
      path: "/users/a",
      component: UsersA,
    },
    {
      path: "/users/b",
      component: UsersB,
    },
    {
      path: "/users/c",
      component: UsersC,
    },
  ],
});

// Vue.mixin({
//   data() {
//     return {
//       user: { name: "jack" },
//       // hobby:['css']
//     };
//   },
//   computed: {
//     hobby() {
//       return this.$root.$options.hobby;
//     },
//     ro() {
//       return this.$root.$options.abc;
//     },
//     // $router() {
//     //   return router
//     // },
//     // $router() {
//     //   return  this.$root.$options.router;
//     // },
//   },
// });

new Vue({
  render: (h) => h(App),
  abc: { a: 1 },
  router: router,
  hobby: ["css", "html"],
}).$mount("#app");
